<template>
  <div class="evaluation-detail">
    <h2>评测任务详情</h2>
    
    <div v-if="errorMessage" class="error-message">
      {{ errorMessage }}
    </div>
    <div v-if="isLoading" class="loading-indicator">
      加载中...
    </div>
    
    <div class="task-info">
      <div class="info-row">
        <span class="info-label">任务ID:</span>
        <span class="info-value">{{ task.id }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">提示词:</span>
        <span class="info-value">{{ task.prompt }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">状态:</span>
        <span :class="'status-' + task.status">{{ task.status }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">创建时间:</span>
        <span class="info-value">{{ formatDate(task.time) }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">裁判模型:</span>
        <span class="info-value">{{ task.judges.join(', ') }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">待评测模型:</span>
        <span class="info-value">{{ task.models.join(', ') }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">关联问题:</span>
        <span class="info-value">{{ task.questionIds.join(', ') }}</span>
      </div>
    </div>
    
    <div class="action-buttons">
      <button @click="handleRunTask" class="run-btn" v-if="task.status !== 'running'">
        执行评测
      </button>
      <button @click="goBack" class="back-btn">
        返回列表
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getTaskById, runTask } from '@/api/evaluation'

export default defineComponent({
  name: 'EvaluationDetail',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const taskId = route.params.taskId as number
    const task = ref({
      id: '',
      prompt: '',
      status: '',
      time: '',
      judges: [] as string[],
      models: [] as string[],
      questionIds: [] as number[]
    })
    const isLoading = ref(false)
    const errorMessage = ref('')

    const fetchTask = async () => {
      isLoading.value = true
      errorMessage.value = ''
      try {
        const data = await getTaskById(taskId)
        task.value = data
      } catch (error) {
        errorMessage.value = '获取任务详情失败: ' + (error as Error).message
        console.error('获取任务详情失败:', error)
      } finally {
        isLoading.value = false
      }
    }

    const handleRunTask = async () => {
      isLoading.value = true
      errorMessage.value = ''
      try {
        await runTask(taskId)
        await fetchTask()
      } catch (error) {
        errorMessage.value = '执行评测任务失败: ' + (error as Error).message
        console.error('执行评测任务失败:', error)
      } finally {
        isLoading.value = false
      }
    }

    const formatDate = (dateStr: string) => {
      return new Date(dateStr).toLocaleString()
    }

    const goBack = () => {
      router.push({ name: 'evaluation' })
    }

    onMounted(() => {
      fetchTask()
    })

    return {
      task,
      isLoading,
      errorMessage,
      handleRunTask,
      formatDate,
      goBack
    }
  }
})
</script>

<style scoped>
.evaluation-detail {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.error-message {
  color: red;
  margin: 10px 0;
  padding: 10px;
  background-color: #ffeeee;
  border-radius: 4px;
}

.loading-indicator {
  margin: 10px 0;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.task-info {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.info-row {
  margin-bottom: 10px;
  display: flex;
}

.info-label {
  font-weight: bold;
  width: 120px;
}

.info-value {
  flex: 1;
}

.status-pending {
  color: orange;
}

.status-running {
  color: blue;
}

.status-completed {
  color: green;
}

.status-failed {
  color: red;
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.run-btn {
  padding: 8px 16px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.back-btn {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
</style>